<template>
  <div class="home">
    <main>
      <ul
        v-infinite-scroll="loadMore"
        :infinite-scroll-disabled="loading"
        class="infinite-list classify-content"
      >
        <li v-for="item in list" :key="item.id" class="infinite-list-item">
          <div style="font-weight: 600" class="classify-title">
            {{ item.title }}
          </div>

          <div>
            {{ item.description }}
          </div>
          <div>
            <el-icon><Star /></el-icon> {{ item.enjoy }} ·
            <el-icon><View /></el-icon> {{ item.reading }} ·
            <el-icon><Share /></el-icon> 分享
          </div>
        </li>
      </ul>
    </main>
  </div>
</template>

<script setup>
import { apiKnowledge } from "@/api/knowledge";
import { onMounted, ref } from "vue";

const page = ref({
  current: 1,
  size: 999,
});

const list = ref([]);

const loading = ref(false);

const loadMore = () => {
  page.value.current++;

  console.log(123);

  getList();
};

const getList = () => {
  apiKnowledge(page.value).then((res) => {
    list.value = [...list.value, ...res.data];

    loading.value = res.total < page.value.current * page.value.size;
  });
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
main {
  background: #fff;
  margin-top: 10px;
}

li {
  border-bottom: 1px solid #f0f2f7;
  height: auto;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 0 20px;
  cursor: pointer;
}

.classify-title:hover {
  color: #f00;
}
</style>
